<template>
  <div class="container">
    <!-- 顶部业绩和筛选栏 -->
    <div class="top-bar">
      <div class="performance">
        <span>本月业绩：</span>
        <span class="current">{{
          numberList.currentTotalProfit ? numberList.currentTotalProfit : 0
        }}</span>
        <span>上月业绩：</span>
        <span class="last">{{ numberList.lastTotalProfit ? numberList.lastTotalProfit : 0 }}</span>
      </div>
      <div class="filter-form">
        <el-form inline :model="form" class="w-full">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="客户名称">
                <el-input
                  style="width: 300px"
                  v-model="form.customer_name"
                  placeholder="请输入客户名称"
                  class="w-40"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工单状态">
                <el-select
                  style="width: 300px"
                  v-model="form.status"
                  placeholder="请选择工单状态"
                  class="w-40"
                >
                  <el-option
                    v-for="dict in getIntDictOptions(DICT_TYPE.TICKET_STATUS)"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工单编号">
                <el-input
                  style="width: 300px"
                  v-model="form.id"
                  placeholder="请输入工单编号"
                  class="w-40"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="来源日期">
                <el-date-picker
                  style="width: 100%"
                  v-model="sourceDate"
                  value-format="YYYY-MM-DD"
                  @change="changeSourceDate"
                  type="daterange"
                  range-separator=" - "
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  class="w-64"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="处理日期">
                <el-date-picker
                  style="width: 100%"
                  v-model="handleDate"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  @change="changeHandleDate"
                  range-separator=" - "
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  class="w-64"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="success" @click="search">搜索</el-button>
                <el-button type="warning" @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <!-- 标签栏和表格区域 -->
    <div class="content">
      <el-tabs v-model="activeTab" class="mb-4" @tab-change="changTab">
        <el-tab-pane label="全部工单" name="all">
          <allWorkOrders ref="allWorkOrdersRef" v-if="activeTab == 'all'" :formData="form" />
        </el-tab-pane>
        <el-tab-pane label="工单创建" name="create">
          <workOrderCreate ref="workOrderCreateRef" v-if="activeTab == 'create'" :formData="form" />
        </el-tab-pane>
        <el-tab-pane label="客户待收" name="toBeCollected">
          <toBeCollected
            ref="toBeCollectedRef"
            v-if="activeTab == 'toBeCollected'"
            :formData="form"
          />
        </el-tab-pane>
        <el-tab-pane label="回收途中" name="duringRecycling">
          <duringRecycling
            ref="duringRecyclingRef"
            v-if="activeTab == 'duringRecycling'"
            :formData="form"
          />
        </el-tab-pane>
        <el-tab-pane label="工单完成" name="done">
          <completedCom ref="completedComRef" v-if="activeTab == 'done'" :formData="form" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import allWorkOrders from './tabs/allWorkOrders.vue'
import workOrderCreate from './tabs/workOrderCreate.vue'
import customerPendingReceipt from './tabs/customerPendingReceipt.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import recyclingInTransit from './tabs/recyclingInTransit.vue'
import recyclingArrived from './tabs/recyclingArrived.vue'
import completedCom from './tabs/completed.vue'
import toBeCollected from './tabs/toBeCollected.vue'
import duringRecycling from './tabs/duringRecycling.vue'
import workOrderAbnormal from './tabs/workOrderAbnormal.vue'
import * as ticketManagementApi from '@/api/ticketManagement/index'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElDatePicker,
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElInputNumber
} from 'element-plus'
const allWorkOrdersRef = ref(null)
const workOrderCreateRef = ref(null)
const customerPendingReceiptRef = ref(null)
const completedComRef = ref(null)
const toBeCollectedRef = ref(null)
const duringRecyclingRef = ref(null)
const sourceDate = ref()
const handleDate = ref()
const numberList = ref({})
// 筛选表单数据
const form = ref({})
onMounted(() => {
  getNum()
})
// 激活的标签页
const activeTab = ref('all')
const getNum = () => {
  ticketManagementApi.getNum().then((res) => {
    console.log('res', res)
    numberList.value = res
  })
}
const search = () => {
  switch (activeTab.value) {
    case 'all':
      nextTick(() => {
        allWorkOrdersRef.value.getList(form.value)
      })
      break
    case 'create':
      nextTick(() => {
        workOrderCreateRef.value.getList(form.value)
      })
      break
    case 'toBeCollected':
      nextTick(() => {
        toBeCollectedRef.value.getList(form.value)
      })
      break
    case 'duringRecycling':
      nextTick(() => {
        duringRecyclingRef.value.getList(form.value)
      })
      break
    case 'done':
      nextTick(() => {
        completedComRef.value.getList(form.value)
      })
      break
    default:
      break
  }
}
const reset = () => {
  form.value = {}
  sourceDate.value = []
  handleDate.value = []
  switch (activeTab.value) {
    case 'all':
      nextTick(() => {
        allWorkOrdersRef.value.getList(form.value)
      })
      break
    case 'create':
      nextTick(() => {
        workOrderCreateRef.value.getList(form.value)
      })
      break
    case 'wait':
      nextTick(() => {
        customerPendingReceiptRef.value.getList(form.value)
      })
      break
    case 'done':
      nextTick(() => {
        completedComRef.value.getList(form.value)
      })
      break
    default:
      break
  }
}
const changeSourceDate = (date) => {
  form.value.sourceDateBegin = sourceDate.value[0]
  form.value.sourceDateEnd = sourceDate.value[1]
}
const changeHandleDate = (date) => {
  form.value.handleDateBegin = handleDate.value[0]
  form.value.handleDateEnd = handleDate.value[1]
}
const changTab = (item) => {
  // 清空查询条件
  form.value = {}
  sourceDate.value = []
  handleDate.value = []
}
</script>

<style scoped lang="scss">
.container {
  margin: 0 auto;
}

.top-bar {
  margin-bottom: 20px;
}

.performance {
  margin-bottom: 10px;
  font-size: 16px;
  font-size: 20px;
}

.performance .current {
  color: red;
  font-weight: bold;
  margin-right: 30px;
}

.performance .last {
  color: red;
  font-weight: bold;
}

.filter-form {
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content {
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
::v-deep .el-form-item__content {
  width: 100% !important;
}
</style>
